<template>
<div class="users">
    <div class="header">
        <h2 class="title">个人中心</h2>
        <el-alert title="禁止发送色情、暴力、政治等敏感信息！违者封号！" type="warning" />
    </div>
    <div class="user-box">
        <el-tabs
            v-model="state.activeName"
            class="users-tabs"
            @tab-click="handleClick"
        >
            <el-tab-pane name="info">
                <template #label>
                    <el-icon size="18"><el-icon-User /></el-icon>
                    <span class="tab-label">个人信息</span>
                </template>
                <usersInfo v-if="state.activeName == 'info'" />
            </el-tab-pane>
            <el-tab-pane name="wallet">
                <template #label>
                    <el-icon size="18"><el-icon-Wallet /></el-icon>
                    <span class="tab-label">钱包</span>
                </template>
                <userWallet v-if="state.activeName == 'wallet'" />
            </el-tab-pane>
            <el-tab-pane name="package">
                <template #label>
                    <el-icon size="18"><el-icon-Money /></el-icon>
                    <span class="tab-label">套餐</span>
                </template>
                <userPackage v-if="state.activeName == 'package'" />
            </el-tab-pane>
<!--            <el-tab-pane name="fourth">-->
<!--                <template #label>-->
<!--                    <el-icon size="18"><el-icon-Trophy /></el-icon>-->
<!--                    <span class="tab-label">权益</span>-->
<!--                </template>-->
<!--                <div>开发中..</div>-->
<!--            </el-tab-pane>-->
            <el-tab-pane name="promotion">
                <template #label>
                    <el-icon size="18"><el-icon-Share /></el-icon>
                    <span class="tab-label">邀请码</span>
                </template>
                <userPromotion v-if="state.activeName == 'promotion'" />
            </el-tab-pane>
            <el-tab-pane name="open">
                <template #label>
                    <el-icon size="18"><el-icon-Link /></el-icon>
                    <span class="tab-label">开放接口</span>
                </template>
                <userOpen v-if="state.activeName == 'open'" />
            </el-tab-pane>
        </el-tabs>
    </div>
</div>
</template>

<script setup lang="ts">
import '/@/assets/web/scss/chat/users.scss'
import {reactive} from 'vue'
import type { TabsPaneContext } from 'element-plus'
import usersInfo from "/@/layouts/frontend/components/chat/users/info.vue";
import userWallet from "/@/layouts/frontend/components/chat/users/wallet.vue";
import userOpen from "/@/layouts/frontend/components/chat/users/open.vue";
import userPromotion from "/@/layouts/frontend/components/chat/users/promotion.vue";
import userPackage from "/@/layouts/frontend/components/chat/users/package.vue";
import {useUserInfo} from "/@/stores/userInfo";
import { useRoute } from 'vue-router'

const route = useRoute()

const state: {
    activeName: string
} = reactive({
    activeName: route.query.tab ? route.query.tab as string : 'info',
})

const userInfo = useUserInfo()
if(!userInfo.isLogin()) {
    window.location.href = '/'
}

const handleClick = (tab: TabsPaneContext) => {
    state.activeName = <string>tab.paneName
}
</script>

<style scoped lang="scss">
.tab-label {
    margin-left: 5px;
}
</style>
